<template>
    <div class="app-container">
         <!-- 搜索表单 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px">            
            <el-form-item label="sni名称:" prop="sni">
                <el-input
                v-model="queryParams.sni"
                placeholder="请输入路由字符串"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="标签:" prop="tag">
                <el-input 
                v-model="queryParams.tag"
                placeholder="请输入Host字符串"
                clearable
                size="small"
                @key.enter.native="handleQuery"
                ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        
        <!-- 表工具栏 新增删除等 -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                v-hasPermi="['kong:certificate:add']"                
                >新增</el-button>
            </el-col>
            
            <el-col :span="1.5">
                <el-button
                    type="success"
                    plain
                    icon="el-icon-edit"
                    size="mini"
                    :disabled="single"
                    @click="handleUpdate"
                    v-hasPermi="['kong:certificate:edit']"
                >修改</el-button>
            </el-col>

            <el-col :span="1.5">
                <el-button
                    type="danger"
                    plain
                    icon="el-icon-delete"
                    size="mini"
                    :disabled="multiple"
                    @click="handleDelete"
                    v-hasPermi="['kong:certificate:remove']"
                >删除</el-button>
            </el-col>

            <el-col :span="1.5">
                    <el-button
                    type="warning"
                    plain
                    icon="el-icon-download"
                    size="mini"
                    :loading="exportLoading"
                    @click="handleExport"
                    v-hasPermi="['kong:certificate:export']"
                >导出</el-button>
            </el-col>

            <right-toolbar :showSearch.sync="showSearch" @queryTable="getlist()"></right-toolbar>

        </el-row>

        <el-row>
            <template>
                <el-table  v-loading="loading" :data="certificates" >                    
                    <el-table-column label="SSL证书链(cert)" align="center" prop="cert" :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column label="SSL私钥(key)" align="center" prop="key" :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column label="SNI名称:" align="center" prop="snis">
                        <template slot-scope="scope">
                            {{scope.row.snis}}
                        </template>
                    </el-table-column>
                    <el-table-column label="id" align="center" prop="id"></el-table-column>
                    <el-table-column label="标签:" align="center" prop="tags"></el-table-column>
                    <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">                        
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-edit"
                                @click="handleUpdate(scope.row)"
                                v-hasPermi="['kong:certificate:edit']"
                            >编辑</el-button>

                            <el-button
                                size="mini"
                                type="text"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)"
                                v-hasPermi="['kong:certificate:remove']"
                            >删除</el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-row>

        <el-dialog :title="title" v-if="addOpen" :visible.sync="addOpen" append-to-body width="900px">
            <add-certificate :operate="operate" :certificate="certificateEntity" @callback="handleCloseDialogCallback"/>
        </el-dialog>



    </div>
</template>
<script>
import {CertificateList,deleteCertificate} from '@/api/kong/certificate.js'
import addCertificate from './addCertificate.vue';
export default {
  components: { addCertificate },
    props: {},
    data () {
        return {
            certificates:[],
            loading: false,
            // 查询条件
            queryParams:{
                pageNum: 1,
                pageSize: 10,
            },
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 导出遮罩层
            exportLoading: false,
            // 总数据行数
            total: 0,
            // 搜索显示标识
            showSearch: true,
            addOpen: false,
            title: '新增',
            operate: 'add',
            certificateEntity: null,
        }
    },
    created(){
        this.getlist();
    },
    methods:{
        getlist(){
            CertificateList().then(res =>{
                // console.log("certificate:"+JSON.stringify(res));
                this.certificates=res.rows;
            })
        },
        handleUpdate(row){
            this.title="编辑";
            this.addOpen=true;
            this.operate="edit";
            this.certificateEntity=row;
        },
        handleDelete(row){
            this.$confirm('确定要删除吗？','警告',{             
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(function(){
                return deleteCertificate(row.id);
            }).then(res =>{
                this.getlist();
                this.msgSuccess("删除成功");
            })
        },
        handleAdd(){
            this.title="新增";
            this.operate="add";
            this.addOpen=true;
        },
        handleExport(){},
        handleQuery(){},
        resetQuery(){},
        handleCloseDialogCallback(payload){
            this.addOpen=false;
            this.getlist();
            
        }
    }
}
</script>